<template>
  <div class="home">
    <!-- search-bar -->
    <van-search class="search-bar" v-model="keyword" show-action placeholder="请输入搜索关键词" @keydown.enter="onSearch" fixed>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
      <template #label>
        <div>

        </div>
      </template>
    </van-search>

    <!-- swipe -->
    <van-swipe :autoplay="3000" class="my-swipe">
      <van-swipe-item v-for="(image, index) in lunboList" :key="index" class="img-box">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- grid -->
    <van-grid :gutter="10" class="funcList">
      <van-grid-item v-for="(func,index) in funcList" :key="index" :to="func.path" :icon="func.icon" :text="func.name" />
    </van-grid>

    <!-- 限时抢购 -->
    <div class="limit-sell">
      <div class="down-time">
        <h4> 限时抢购 &nbsp;&nbsp;</h4>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="goods-list">
        <div class="goods-item" v-for="(goods,index) in goodsList" :key="index" @click="goDetail(goods.id)">
          <div class="imgbox">
            <img v-lazy="goods.pictUrl" alt="">
          </div>
          <p class="g-title">{{goods.title}}</p>
          <p class="g-price">{{goods.Price}}</p>
          <p class="g-store">{{goods.shopTitle}}</p>
        </div>
      </div>
      <p class="no-more">没有更多了哦~</p>
    </div>
  </div>
</template>
<script>
import { getGoods } from "@/api/home.js"
import { mapState } from 'vuex'
import '@/assets/css/goods/goods-list.scss'
export default {
  data() {
    return {
      lunboList: [],
      keyword: '',
      time: 30 * 60 * 60 * 1000,
      goodsList: []
    }
  },
  created() {
    this.getGoods()
    this.getGoodsList('限时抢购')
  },
  computed: {
    ...mapState({
      funcList: state => state.home.funcList
    })
  },
  methods: {

    async getGoods() {
      const res = await getGoods('华为手机')
      for (let i = 0; i < 5; i++) {
        this.lunboList.push(res.data.data[i].pictUrl)
      }
    },
    async getGoodsList(keyword) {
      const res = await getGoods(keyword)
      this.goodsList = res.data.data
      this.$store.commit('goods/SET_GOODS_LIST', this.goodsList)
    },
    goDetail(id) {
      this.$router.push('/home/goodsInfo/' + id)
    },
    onSearch() {
      this.$store.commit('search/SET_KEY_WORD', this.keyword)
      this.$router.push('/home/search')
    }
  }
}
</script>
<style lang="scss" >
.home {
  box-sizing: border-box;
  .my-swipe {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    .img-box {
      width: 100%;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #eee;
      img {
        width: 100%;
      }
    }
  }
  .search-bar {
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .limit-sell {
    box-sizing: border-box;
    padding: 20px 10px;
    .down-time {
      display: flex;
      .colon {
        display: inline-block;
        margin: 0 4px;
        color: #ee0a24;
      }
      .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #ee0a24;
        border-radius: 4px;
      }
    }
    .goods-list .goods-item {
      margin: 9px;
    }
  }
}
</style>